<!DOCTYPE html>
<html>

<head>
  <title>表单设计器kcz</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/k-form-design/lib/k-form-design.css">
</head>

<body>
  <div id="app">
    <k-form-build :value="jsonData"></k-form-build>
  </div>
  <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- <script src="http://cdn.kcz66.com/vue.min.js"></script> -->
  <script src="//unpkg.com/k-form-design/lib/k-form-design.umd.min.js"></script>
  <script>
    let jsonData = {"list":[{"type":"input","label":"单行文本","options":{"width":"100%","defaultValue":"","placeholder":"请输入","disabled":false},"model":"input_1577875678405","key":"input_1577875678405","rules":[{"required":true,"message":"必填项"}]},{"type":"date","label":"日期选择器","options":{"width":"100%","defaultValue":"","range":false,"showTime":false,"disabled":false,"clearable":false,"placeholder":"请选择","rangePlaceholder":["开始时间","结束时间"],"format":"YYYY-MM-DD"},"model":"date_1577877450971","key":"date_1577877450971","rules":[{"required":true,"message":"必填项"}]},{"type":"textarea","label":"多行文本","options":{"width":"100%","minRows":4,"maxRows":6,"defaultValue":"","disabled":false,"placeholder":"请输入"},"model":"textarea_1577877446659","key":"textarea_1577877446659","rules":[{"required":true,"message":"必填项"}]},{"type":"rate","label":"评分","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false},"model":"rate_1577877468717","key":"rate_1577877468717","rules":[{"required":true,"message":"必填项"}]}],"config":{"layout":"horizontal","labelCol":{"span":4},"wrapperCol":{"span":18},"hideRequiredMark":false,"customStyle":""}}   
    let vm = new Vue({
      el: '#app',
      data: {
        jsonData
      }
    })
  </script>
</body>

</html>